<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/menu.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/orderForm.css" media="screen" title="no title" charset="utf-8">
    <title></title>
</head>
<!-- 闰楠 10.27 新增右侧导航条-->

<body>
    <div class="header">
        <div class="roof">
            <p class="roof_left">
                您好！欢迎您来到yoni零食网 &nbsp &nbsp &nbsp<a href="#">登录</a> | <a href="#">注册</a>
            </p>
            <ul class="roof_right">
                <li><a href="#">我的订单</a></li>
                <li>|</li>
                <li><a href="#">订单速查</a></li>
                <li>|</li>
                <li><a href="#">积分兑换</a></li>
                <li>|</li>
                <li><a href="helpcontent.html">帮助中心</a></li>
                <li>|</li>
                <li><a href="#">官方微博</a></li>
            </ul>
        </div>
        <div class="header-head">
            <a href="#" class="logo"></a>
            <div class="searchwarp">
                <form class="search" action="index.html" method="post">
                    <div class="search_bg">
                        <input type="text" name="name" class="stext" placeholder="搜索">
                        <input type="submit" name="name" class="sbutton" value="找零食">
                    </div>
                    <!-- 暂时写成空壳 -->
                </form>
            </div>
            <div class="aaa">
                <a href="#"></a>
            </div>
        </div>
        <div class="navwrap">
            <div class="nav">
                <div class="sidebar">
                    <h3><a href="#" class="sidebar_a">全部商品分类</a></h3>
                    <div class="menuwrap">
                        <div class="menu">
                            <h3 class="biscuit"><a href="#">饼干糕点</a></h3>
                            <h3 class="candy"><a href="#">糖果巧克力</a></h3>
                            <h3 class="drink"><a href="#">饮料/罐头/牛奶</a></h3>
                            <h3 class="fruit"><a href="#">蜜饯果干</a></h3>
                            <h3 class="jerky"><a href="#">肉质产品</a></h3>
                            <h3 class="nut"><a href="#">坚果炒货</a></h3>
                            <h3 class="snacks"><a href="#">海味零食</a></h3>
                            <h3 class="extrusion"><a href="#">膨化食品</a></h3>
                            <h3 class="bean"><a href="#">豆菌笋类</a></h3>
                            <h3 class="fash_food"><a href="#">速食/方便面</a></h3>
                            <h3 class="import"><a href="#">进口零食</a></h3>
                            <h3 class="cheap"><a href="#">特价零食</a></h3>
                            <h3 class="brand"><a href="#">品牌零食</a></h3>
                        </div>
                        <div class="biscuit_hover">
                            <ul>
                                <li><a href="#">饼干</a></li>
                                <li><a href="#">威化饼</a></li>
                                <li><a href="#">曲奇</a></li>
                                <li><a href="#">苏打/夹心饼干</a></li>
                                <li><a href="#">涂层饼干</a></li>
                                <li><a href="#">中式糕点</a></li>
                                <li><a href="#">蛋挞/酥/松塔</a></li>
                                <li><a href="#">蛋糕</a></li>
                            </ul>
                        </div>
                        <div class="candy_hover">
                            <ul>
                                <li><a href="#">软糖</a></li>
                                <li><a href="#">硬糖</a></li>
                                <li><a href="#">棒棒糖</a></li>
                                <li><a href="#">口香糖</a></li>
                                <li><a href="#">薄荷糖</a></li>
                                <li><a href="#">含片</a></li>
                                <li><a href="#">果冻布丁</a></li>
                                <li><a href="#">龟苓膏</a></li>
                                <li><a href="#">巧克力</a></li>
                            </ul>
                        </div>
                        <div class="drink_hover">
                            <ul>
                                <li><a href="#">咖啡</a></li>
                                <li><a href="#">奶茶冲饮</a></li>
                                <li><a href="#">果味冲饮</a></li>
                                <li><a href="#">花果茶</a></li>
                                <li><a href="#">乌龙茶</a></li>
                                <li><a href="#">蜂蜜</a></li>
                            </ul>
                        </div>
                        <div class="fruit_hover">
                            <ul>
                                <li><a href="#">梅类</a></li>
                                <li><a href="#">栆类</a></li>
                                <li><a href="#">葡萄干</a></li>
                                <li><a href="#">山楂类</a></li>
                                <li><a href="#">水果干</a></li>
                                <li><a href="#">芒果类</a></li>
                                <li><a href="#">蔬菜干</a></li>
                                <li><a href="#">果干、蔬菜干、枣</a></li>
                            </ul>
                        </div>
                        <div class="jerky_hover">
                            <ul>
                                <li><a href="#">鸡肉制品</a></li>
                                <li><a href="#">鸭肉制品</a></li>
                                <li><a href="#">牛肉制品</a></li>
                                <li><a href="#">猪肉制品</a></li>
                            </ul>
                        </div>
                        <div class="nut_hover">
                            <ul>
                                <li><a href="#">瓜子</a></li>
                                <li><a href="#">花生</a></li>
                                <li><a href="#">栗子</a></li>
                                <li><a href="#">坚果</a></li>
                                <li><a href="#">豆类</a></li>
                            </ul>
                        </div>
                        <div class="snacks_hover">
                            <ul>
                                <li><a href="#">鱼类</a></li>
                                <li><a href="#">海苔</a></li>
                                <li><a href="#">鱿鱼</a></li>
                            </ul>
                        </div>
                        <div class="extrusion_hover">
                            <ul>
                                <li><a href="#">薯片</a></li>
                                <li><a href="#">米饼</a></li>
                                <li><a href="#">虾片</a></li>
                                <li><a href="#">脆脆条、尖角酥</a></li>
                                <li><a href="#">爆米花</a></li>
                                <li><a href="#">锅巴</a></li>
                            </ul>
                        </div>
                        <div class="bean_hover">
                            <ul>
                                <li><a href="#">豆类</a></li>
                                <li><a href="#">菌类</a></li>
                                <li><a href="#">笋类</a></li>
                                <li><a href="#">苏打/夹心饼干</a></li>
                                <li><a href="#">涂层饼干</a></li>
                                <li><a href="#">中式糕点</a></li>
                                <li><a href="#">蛋挞/酥/松塔</a></li>
                                <li><a href="#">蛋糕</a></li>
                            </ul>
                        </div>
                        <div class="fash_food_hover">
                            <ul>
                                <li><a href="#">肠/肠仔</a></li>
                                <li><a href="#">方便面</a></li>
                                <li><a href="#">速食品</a></li>
                            </ul>
                        </div>
                        <div class="import_hover">
                            <ul>
                                <li><a href="#">日本</a></li>
                                <li><a href="#">韩国</a></li>
                                <li><a href="#">马来西亚</a></li>
                                <li><a href="#">菲律宾</a></li>
                                <li><a href="#">印尼</a></li>
                                <li><a href="#">泰国</a></li>
                                <li><a href="#">欧美</a></li>
                                <li><a href="#">韩国</a></li>
                            </ul>
                        </div>
                        <div class="cheap_hover">
                            <ul>
                                <li><a href="#">广东</a></li>
                                <li><a href="#">湖南</a></li>
                                <li><a href="#">四川</a></li>
                                <li><a href="#">浙江</a></li>
                                <li><a href="#">福建</a></li>
                                <li><a href="#">云南</a></li>
                                <li><a href="#">海南</a></li>
                                <li><a href="#">山东</a></li>
                                <li><a href="#">天津</a></li>
                                <li><a href="#">重庆</a></li>
                                <li><a href="#">内蒙古</a></li>
                                <li><a href="#">河南</a></li>
                                <li><a href="#">湖北</a></li>
                                <li><a href="#">江苏</a></li>
                                <li><a href="#">河北</a></li>
                                <li><a href="#">东莞</a></li>
                                <li><a href="#">西藏</a></li>
                                <li><a href="#">新疆</a></li>
                                <li><a href="#">安徽</a></li>
                            </ul>
                        </div>
                        <div class="brand_hover">
                            <ul>
                                <li><a href="#">有友</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <ul class="hot">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="seckilling.html">秒杀</a></li>
                    <li><a href="promotion.html">促销</a></li>
                    <li><a href="newProducts.html">新品</a></li>
                    <li><a href="import.html">进口零食</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- >>>>>>>>>>>>>>>>>中间部分<<<<<<<<<<<<<<<<<<<<<<< -->
    <div class="orderForm">
      <!--订单查询头部信息-->
      <div class="orderForm_header">
        订单速查
      </div>
      <!--订单查询内容信息-->
      <div class="orderForm_content">
        <div class="orderForm_content_left">
          <em>*</em>
          <span>您的订单号</span>
          <input type="text" name="name" value="">
          <em>*</em>
          <span>收货人姓名</span>
          <input type="text" name="name" value="">
          <span class="userInfo">(订单号，收货人姓名可以任选一项)</span>
          <em>*</em>
          <span>联系方式</span>
          <input type="text" name="name" value="">
        </div>

        <!--放大镜图片-->
        <div class="orderForm_content_right">
          <img src="img/fangdajing.png" alt="" />
        </div>
      </div>
        <!--订单查询重置按钮-->
      <div class="orderForm_footer">
        <input type="button" name="name" value="查询"  class="orderForm_footer_search">
        <input type="button" name="name" value="重置"  class="orderForm_footer_reset" >
      </div>
      </div>
    <!-- >>>>>>>>>>>>>>>>>尾部部分<<<<<<<<<<<<<<<<<<<<<<< -->
    <footer class="footer">
        <!-- 服务条 -->
        <div class="footer_server"></div>
        <p class="footer_line"></p>
        <!-- 服务信息 -->
        <!-- 所有a链接未写 -->
        <div class="footer_info">
            <ul class="footer_info_1">
                <h3 class="footer_h">新手指南</h3>
                <li class="footer_li"><a href="#">购物流程</a></li>
                <li class="footer_li"><a href="#">找回密码</a></li>
                <li class="footer_li"><a href="#">会员注册</a></li>
                <li class="footer_li"><a href="#">积分制度</a></li>
            </ul>
            <ul class="footer_info_2">
                <h3 class="footer_h">付款说明</h3>
                <li class="footer_li"><a href="#">商品发票</a></li>
                <li class="footer_li"><a href="#">办理退款</a></li>
                <li class="footer_li"><a href="#">支付方式</a></li>
            </ul>
            <ul class="footer_info_3">
                <h3 class="footer_h">配送说明</h3>
                <li class="footer_li"><a href="#">配送运费</a></li>
                <li class="footer_li"><a href="#">配送时间</a></li>
            </ul>
            <ul class="footer_info_4">
                <h3 class="footer_h">客户服务</h3>
                <li class="footer_li"><a href="#">订单速查</a></li>
                <li class="footer_li"><a href="#">代金券</a></li>
                <li class="footer_li"><a href="#">常见问题</a></li>
            </ul>
            <!-- 微信二维码 -->
            <div class="footer_wxpic"></div>
            <p class="footer_line2"></p>
            <!-- 客服电话 -->
            <div class="footer_contact"></div>
        </div>
        <span class="footer_bigline"></span>
        <!-- 友情链接 -->
        <div class="footer_friendlink">
            <span class="friendlink">友情链接:</span>
            <a href="#">美食网</a>
            <a href="#">巴黎商城</a>
            <a href="#">杂志</a>
            <a href="#">零食</a>
            <a href="#">茶叶</a>
            <a href="#">优购物</a>
            <a href="#">名酒招商网</a>
            <a href="#">村村通商城</a>
            <a href="#">好吃的零食</a>
            <a href="#">美食</a>
            <a href="#">芝士</a>
            <a href="#">欧宝丽</a>
            <a href="#">红酒</a>
            <a href="#">购物搜索</a>
        </div>
        <!-- 关于我们 -->
        <div class="footer_aboutus">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">网站地图</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
    </footer>
    <div class="right_nav_big_wrap">
        <div class="right_nav_wrap">
            <!-- 最外面的导航栏  -->
            <ol class="right_nav">
                <li id="shopping_car" href="#">
                    <img src="img/right_shopping.png" alt="" />
                    <span>购物车</span>
                    <span id="shopping_number">0</span>
                </li>
                <li>
                    <img src="img/right_contact.png" alt="" />
                    <span>联系客服</span>
                </li>
                <li>
                    <img src="img/right_complain.png" alt="" />
                    <span>投诉</span>
                </li>
                <li>
                    <img src="img/right_advice.png" alt="" />
                    <span>意见</span>
                </li>
                <li id="a9">
                    <img src="img/right_return.png" alt="" />
                </li>
            </ol>
        </div>
        <!-- 当点击购物车时出现的购物车部分 -->
        <div class="right_nav_shopping_car" id="right_nav_shopping_car">
            <div class="right_nav_pay_top">
                <a href="#">进入购物车>></a>
            </div>
            <!-- 主要是客户添加的商品的信息 -->
            <div class="right_nav_goods_content">

            </div>
            <div class="right_nav_pay_price">
                ￥0.00
            </div>
            <div class="right_nav_pay_bottom">
                <a href="#">去购物车结算</a>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery-3.1.0.js" charset="utf-8"></script>
<script src="js/import.js" charset="utf-8"></script>
<script src="js/right_nav.js" charset="utf-8"></script>




<script type="text/javascript">
    //新加的轮播图 2016年10月27日 韩冬冬修改
    var country_content = document.getElementById('country_content');
    // 获取conten div
    var country_banner = document.getElementById('country_banner');
    // 定义一个变量记录x轴的位置
    var x = 0;
    // 复制content的子标签
    // country_banner.innerHTML += country_banner.innerHTML;
    // 定义函数处理滚动
    function scroll() {
        x--;
        country_banner.style.left = x + 'px';
        if (x == -1200) {
            x = 0;
        }
    }
    var start = setInterval('scroll()', 1);
    country_banner.onmouseover = function() {
        clearInterval(start);
    }
    country_banner.onmouseout = function() {
        start = setInterval('scroll()', 1);
    }


    //for循环遍历 点击每个城市平滑跳转到相应的页面
    for (var i = 1; i < 13; i++) {
        $('#a' + i).click(function() {
            $('html, body').animate({
                scrollTop: $($.attr(this, 'href')).offset().top
            }, 1000);
            return false;
        });
    }
    $('#a9').click(function() {
        $('html,body').animate({
            scrollTop: 0
        }, 1000);
    })

    //for循环遍历
    for (var i = 1; i < 7; i++) {
        $('#b' + i).click(function() {
            $('html, body').animate({
                scrollTop: $($.attr(this, 'href')).offset().top
            }, 1000);
            return false;
        });
    }
    $('#a9').click(function() {
        $('html,body').animate({
            scrollTop: 0
        }, 1000);
    })
</script>
<script src="js/menu.js" charset="utf-8"></script>

</html>
